<template>
  <teleport to="#modal2">
      <div class="modal" v-if="isOpen">
          <slot>modal..</slot>
        <div class="closebtn">
            <button @click="btnColoseModal">关闭</button>
        </div>
      </div>
  </teleport>
</template>

<script>
/* ===========defineComponent定义弹框组件，添加关闭按钮========= */
import {defineComponent} from 'vue'
export default defineComponent({
    // 定义接受的属性
    props: {
        // 判断是否打开弹框
        isOpen: {
            require: true,
            type: Boolean
        }
    },

    // 添加暴露事件
    emits: {
        'close-modal': null,
        // 这里是可以对暴露的函数做校验
        // 'colose-modal2': (payload:any,) => {return payload.type === 'close'}
    },
    setup(props,context) {
        const btnColoseModal = ()=> {
            context.emit('close-modal')

        }
        return {
            btnColoseModal
        }
    }
})
</script>

<style>
    .modal {
        height: 200px;
        width: 200px;
        border: 1px solid;
        background-color: red;
        position: fixed;
        top: 50%;
        left: 50%;
        margin-left: -100px;
        margin-top: -100px;
    }
    .closebtn {
        margin: 150px 78px;
    }
</style>